<template>
  <form-dialog
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    :title="title">
    <template slot="content">
      <p>{{$t("desktopManage.message.assignUser")}}</p>
      <el-select :loading="loading" filterable remote :remote-method="remoteMethod" @keydown.enter.native="getUserList" v-model="select_value">
        <el-option
          ref='option'
          v-for="(item, index) in options"
          :key="index"
          :label="item.name"
          :uuid='item.uuid'
          :value="data.type === 'HorizonView' ? item.object_sid : item.object_guid">
        </el-option>
        <el-pagination
          class="pagination"
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="currentTotal">
        </el-pagination>
      </el-select>
    </template>
    <template slot="footer">
      <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
      <el-button :disabled="loading" type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialog from '../../../components/Dialog/formDialog.vue'
export default Vue.extend({
  components: {
    FormDialog
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      data: {},
      options: [],
      select_value: '',
      currentPage: 1,
      currentTotal: null,
      searchValue: ''
    }
  },
  methods: {
    handleSizeChange(val: any) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val: any) {
      (this as any).getUserList();
    },
    handleClose () {
      this.visible = false;
      this.loading = false;
    },
    remoteMethod(val: any) {
      this.searchValue = val;
    },
    // 获取数据
    getUserList() {
      this.loading = true;
      let params: any = {};
      params.page = this.currentPage;
      params.page_size = 5;
      params.search = this.searchValue;
      if ((this as any).data.type === 'HorizonView') {
        params.resource_type = 'HorizonView';
      } else {
        params.resource_type = 'HorizonDaas';
      }
      params.resource_id = (this.data as any).resource_id;
      (this as any).$tunnyApi.getDesktopUserList(params).then((res: any) => {
        this.currentTotal = res.total;
        this.options = res.rows;
        this.loading = false;
      })
    },
    submit () {
      this.loading = true;
      let uuid = '';
      if (this.select_value && this.select_value !== (this as any).data?.username) {
        if (this.options.length > 0) {
          this.options.forEach((item: any) => {
            if ((this.data as any).type === 'HorizonView') {
              if (item.object_sid === this.select_value) {
                uuid = item.uuid;
              }
            } else {
              if (item.object_guid === this.select_value) {
                uuid = item.uuid;
              }
            }
          })
        }
        (this as any).$pandaApi.buildDesktopAuth((this.data as any).id, {user_id: this.select_value, user_uuid: uuid}).then((res: any) => {
          this.visible = false;
          this.loading = false;
          this.$emit('success');
          this.$message({
            message: this.$t('desktopManage.message.operationSuccess', {subject: this.$t('desktopManage.desktop'), operation: this.$t('desktopManage.assigningUsers')}).toString(),
            type: 'success'
          });
        }).catch(() => {
          this.loading = false;
          this.$message({
            message: this.$t('desktopManage.message.operationFail', {subject: this.$t('desktopManage.desktop'), operation: this.$t('desktopManage.assigningUsers')}).toString(),
            type: 'warning'
          });
        });
      } else {
        this.loading = false;
        this.visible = false;
      }
    },
    init (obj: any) {
      this.select_value = obj.data?.username;
      this.searchValue = '';
      this.currentPage = 1;
      this.data = {};
      this.data = obj.data;
      this.title = this.$t('desktopManage.assigningUsers').toString();
      (this as any).getUserList();
      this.visible = true;
    }
  }
})
</script>

<style lang="scss" scoped>
.pagination {
  ::v-deep.el-pager {
    font-weight: normal;
  }
  ::v-deep.el-pagination__editor {
    line-height:22px !important;
    height:22px !important;
  }
}
</style>
